<template>
  <div>
    <!-- 分类表格
:data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框)
:expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头)
border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮) -->

    <tree-table :data="itemList" :columns="columns" :selection-type="false"
                :expand-type="false" show-index index-text="#" border :show-row-hover="false">

      <template slot-scope="scope" slot="opt">
        <el-button size="mini" type="primary" @click="handleEdit(1, scope.row)">
          <i class="el-icon-edit">编辑</i>
        </el-button>

        <el-button size="mini" type="primary" @click="handleEdit(2, scope.row)">
          <i class="el-icon-edit">增加</i>
        </el-button>

        <el-button size="mini" type="danger" @click="del(scope.row)">
          <i class="el-icon-delete">删除</i>
        </el-button>
      </template>
    </tree-table>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editItemVisible" :close-on-click-modal="false">
      <el-form :model="editItem" label-width="80px" :rules="editItemRules" ref="editItem">


        <el-form-item label="分类名称" prop="name">
          <el-input v-model="editItem.name" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="类型模板ID" prop="typeId" label-width="95px">
          <el-input v-model="editItem.typeId" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editItemVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "ItemView",
  data() {
    return {
      //表格数据
      itemList: [],

      editItem:{},



      editLoading:false,
      editItemVisible:false,
      editItemRules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        typeId: [
          { required: true, message: '请输入类型模板ID', trigger: 'blur' }
        ]
      },

      //columns(设置表格中列配置信息)
      columns: [
        {
          label: '分类名称',
          prop: 'name'
        },
        {
          label: '类型模板ID',
          prop: 'typeId'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        },
      ],
    };
  },
  methods:{
    queryItem(){
      this.$http.get("/system/api/item/queryTree")
          .then(resp=>{
            this.itemList = resp.data.data;
          }).catch(resp=>{
        this.$message({
          message: "请登录",
          type: 'error'
        });
      })
    },

    //显示编辑界面
    handleEdit: function (index, row) {
      this.editItem={};
      if (index==1){
          this.editItem=Object.assign({},row)
          this.editItemVisible = true;
      }else {
          this.editItem.parentId=1,
          this.editItem.id=row.id,
          this.editItemVisible = true;
      }
    },

    //删除
    del:function(row){
      if (row.children.length!=0){
          this.$message({
            message: "子级内容未删除",
            type: 'error'
          });
      }else {
        this.$confirm('确认删除该记录吗?', '温馨提示', {
          type: 'warning'
        }).then(() => {
          this.editLoading = true;
          let url = "/system/api/item/delete/"+row.id;
          this.$http.delete(url)
              .then(resp=>{
                    //去除忙等框
                    this.editLoading = false;
                    if (resp.data.code==200){
                      this.$message({
                        message: resp.data.msg,
                        type: 'success'
                      });
                      this.queryItem();
                    }else {
                      this.$message({
                        message: resp.data.msg,
                        type: 'error'
                      });
                    }
                  }
              )
              .catch(result=>{
                //去除忙等框
                this.editLoading = false;
                //提示
                this.$message({
                  message: '系统错误！',
                  type: 'error'
                });
              })

        }).catch(() => {

        });
      }
    },

    //编辑
    editSubmit: function () {
      this.$refs.editItem.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            let para=this.editItem;
            this.$http.put("/system/api/item/save",para)
                .then(resp=>{
                  if (resp.data.code==200){
                    this.$message({
                      message: resp.data.msg,
                      type: 'success'
                    });
                    this.editLoading=false;
                    this.editItemVisible=false;
                    this.queryItem();
                  }else {
                    this.$message({
                      message: resp.data.msg,
                      type: 'error'
                    });
                    this.editLoading=false;
                    this.editItemVisible=false;
                  }
                }).catch(resp=>{
              this.editLoading=false;
              this.$message({
                message: "网络异常，稍后重试",
                type: 'error'
              });
            })
          });
        }
      });
    },



  },
  mounted() {
    this.queryItem();
  }
}
</script>

<style scoped>

</style>